<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
    <style>
        .fc{
            color:red;
        }
        .fs{
            font-size: 20px;
        }
        .border{
            border: 4px solid black;
        }
        .bc{
            background-color: #dedede;
        }
        .fcw{
            font-weight: bolder;
        }
    </style>
</head>

<body>
    <div id="app">
        <h4>class属性的绑定</h4>
        <pre class="note">
        h5 规范中class的样式有效取值 ： css类样式名 css类样式名 ……
        vue v-bind 完成 class绑定时，提供 三种有效变量取值 ( vue会自动更具类型完成样式格式转换 )
            + String : 保留原始class的取值规范
            + Array : 将类样式以数组元素方式进行存储，并在页面绑定时由vue自行完成拼接
            + Object : vue绑定class时，会将对象的key理解为类样式名，value由boolean值描述，该类样式是否需要渲染到标签上
                    例如 v-bind:class = " { 类样式名1:true,类样式名2:false,…… } "
        
        v-bind对class的属性绑定是vue中指令操作属性时，唯二的可以完成动静结合绑定操作的
        </pre>
        <p class="fs fc border bc">class样式加载-参考</p>
        <p :class=" classStr ">class样式加载- v-bind 取值String</p>
        <input type="button" value="清除样式" @click=" classStr = '' ">

        <!-- <input type="button" value="删除|添加fc" @click="addOrRemoveClass('fc')"> -->
        <!-- <input type="button" value="删除|添加fc" @click="addOrRemoveClass2('fc')">
        <input type="button" value="删除|添加fs" @click="addOrRemoveClass2('fs')"> -->
        <input type="button" value="删除|添加fc" @click="addOrRemoveClass3('fc')">
        <input type="button" value="删除|添加fs" @click="addOrRemoveClass3('fs')">
        <input type="button" value="删除|添加border" @click="addOrRemoveClass3('border')">
        
        <hr>
        <p :class=" classArr ">class样式加载- v-bind 取值Array</p>
        <input type="button" value="删除|添加fc" @click="addOrRemoveClass4('fc')">
        <input type="button" value="删除|添加fs" @click="addOrRemoveClass4('fs')">
        <input type="button" value="删除|添加border" @click="addOrRemoveClass4('border')">

        <hr>
        <p :class=" Array.from(classSet) ">class样式加载- v-bind 取值Set</p>
        <input type="button" value="删除|添加fc" @click="addOrRemoveClass5('fc')">
        <input type="button" value="删除|添加fs" @click="addOrRemoveClass5('fs')">
        <input type="button" value="删除|添加border" @click="addOrRemoveClass5('border')">

        <hr>
        <p :class=" classObj ">class样式加载- v-bind 取值Object</p>
        <input type="button" value="删除|添加fc" @click="classObj.fc=!classObj.fc">
        <input type="button" value="删除|添加fs" @click="classObj.fs=!classObj.fs">
        <input type="button" value="删除|添加border" @click="classObj.border=!classObj.border">
        <input type="button" value="删除|添加bc" @click="classObj.bc=!classObj.bc">

        <hr>
        <p class="fc fs border" :class=" bc ">class样式加载-动态绑定的样式bc-静态绑定的样式 fc fs border</p>
        <input type="button" value="删除|添加bc" @click=" bc = bc==''?'bc':'' ">

        <hr>
        <p class=" fs border bc" :class=" v.length>5?'':'fc' ">class样式加载-动态绑定的样式fc-静态绑定的样式 bc fs border</p>
        <input type="text" @input=" v = $event.target.value ">
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    // classStr:"fs fc border bc"
                    classStr:"fcw fs fc border bc",
                    classArr:[ "fcw","fs","fc","border","bc" ],
                    classSet:new Set([ "fcw","fs","fc","border","bc" ]),
                    classObj:{
                        fcw:true,
                        fs:true,
                        fc:true,
                        border:false,
                        bc:false
                    },
                    bc:"bc",
                    v:"",
                }
            },
            methods: {
                addOrRemoveClass(cname){
                    let i = this.classStr.indexOf(cname)
                    if(i==-1){
                        this.classStr = this.classStr+" "+cname
                    }else{
                        this.classStr = this.classStr.replace(cname,"")
                    }
                },
                addOrRemoveClass2(cname){
                    let arr = this.classStr.split(" ");
                    let i = arr.indexOf(cname);
                    if(i==-1){
                        arr.push(cname);
                    }else{
                        arr.splice(i,1);
                    }
                    this.classStr = arr.join(" ");
                },
                addOrRemoveClass3(cname){
                    let set = new Set( this.classStr.split(" ") );
                    if( set.has(cname) ){
                        set.delete(cname);
                    }else{
                        set.add(cname)
                    }
                    this.classStr = Array.from(set).join(" ");
                },
                // -------------
                addOrRemoveClass4(cname){
                    let i = this.classArr.indexOf(cname);
                    if(i==-1){
                        this.classArr.push(cname);
                    }else{
                        this.classArr.splice(i,1);
                    }
                },
                addOrRemoveClass5(cname){
                    if( this.classSet.has(cname) ){
                        this.classSet.delete(cname);
                    }else{
                        this.classSet.add(cname)
                    }
                },
            }
        }).mount("#app");
    </script>
</body>

</html>